<template>
    <div id="cardproduct">
        <head-tip title='产品详情' :isback=true></head-tip>
        <section class="content">
            <div class="product-detail">
                <div class="main clearfix">
                    <p class="p-name"><label>产品名称：</label><span>{{dataList.cname}}</span></p>
                    <p class="p-memo"><label>产品描述：</label><span>{{dataList.ccontent}}</span></p>
                    <p class="p-pic"><label>产品缩略图：</label><span><img :src="dataList.cplogo"></span></p>
                    <p class="p-pic"><label>更多图片：</label><span>
            
                        <img v-for="(item,key) in dataList.attachs" :key="key" :src="domainName+item.cpath+item.cfilename">
                    
                    </span>
                    </p>
                    <a href="#" class="proBuy">立即购买</a>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import headTip from '@/components/common/head'
export default {
    data () {
      return {
        dataList:[],
        ajaxquery:{},
        mescroll:'',
        domainName:'http://card.adouyun.com/CloudCard/',
      };
    },
    computed:{
        headTip
    },
    methods:{
       getData(curData,page){
            var _this=this
            var thisData=curData  
            if(thisData.ddate){
                thisData.atime=_this.timeDate(thisData.ddate,2)
            }
            if(thisData.cplogo){
                thisData.cplogo=_this.catchurl(thisData.cplogo)
            }
            if(thisData.comments){
                thisData.comments.forEach(function(v,k){
                    if(v.ddate){
                        v.btime=_this.timeBetween(v.ddate)
                    }
                })
                thisData.comments=thisData.comments.reverse()
            }
            this.dataList=thisData
            console.log(thisData)
        }
    },
    components:{
        headTip
    },
    created(){
        
    },
    mounted(){
        this.ajaxquery['id']=this.$route.query.id
        this.ajaxquery['uid']=this.$route.query.uid
        var sendData={id:this.ajaxquery['id']}
        this.$axios.get(this.httpurl('product/detailsProduct'),{params:sendData})
        .then(response=>{
            var data=response.data
            if(data.result==1){
                var CurData=data.data
                this.getData(CurData)
            }else{
                 alert(data.msg);
            }
        })
    }
}
</script>

<style>
[v-cloak] { display: none }
.mescroll{position: fixed;top: 44px;bottom: 0;height: auto;}
</style>
<style scoped>
    .content{margin-top:44px}
    .product-detail p{margin-bottom:15px}
    .product-detail{margin-top:2.6rem;height:auto}
    .product-detail .main{width:100vw;padding-bottom:2rem}
    .product-detail .main p.p-name{width:100%;height:2.6rem;background:#f9f9f9;border-top:solid .01rem #eee;border-bottom:solid .01rem #eee;line-height:2.6rem;color:#666}
    .product-detail .main p.p-name label{display:block;width:27%;float:left;padding-left:3%}
    .product-detail .main p.p-name span{display:block;width:67%;float:left;padding-right:3%}
    .product-detail .main p.p-memo{width:100%;height:auto;min-height:2.6rem;background:#f9f9f9;border-top:solid .01rem #eee;border-bottom:solid .01rem #eee;color:#666;overflow:hidden;padding-bottom:.4rem}
    .product-detail .main p.p-memo label{display:block;width:27%;float:left;padding-left:3%;line-height:2.6rem}
    .product-detail .main p.p-memo span{display:block;width:67%;float:left;height:auto;padding-right:3%;padding-top:.7rem;line-height:1.3rem}
    .product-detail .main p.p-pic{width:100%;height:auto;min-height:2.6rem;background:#f9f9f9;border-top:solid .01rem #eee;border-bottom:solid .01rem #eee;color:#666;overflow:hidden;padding-bottom:.4rem}
    .product-detail .main p.p-pic label{display:block;width:97%;padding-left:3%;line-height:2.6rem}
    .product-detail .main p.p-pic span{display:block;width:94%;margin:auto}
    .product-detail .main p.p-pic span img{display:block;width:100%;height:auto}
    .product-detail .main .proBuy{display:block;width:94%;height:2.6rem;background:#e1e1e1;border-radius:5px;text-align:center;line-height:2.6rem;font-size:1.2rem;color:#999;margin:auto;margin-top:2rem;margin-bottom:1rem}

</style>
